@import '../color/colors';

$color-white: #fff;
$color-black: #000;
$color-gray: #90a0ae;
$color-dark: #262c33;
$color-red: #ff1f0f;

$color-primary: $blue-6;
$color-success: $green-6;
$color-warning: $warn-6;
$color-error: $red-6;
$color-info: $color-gray;
$color-primary-secondary: mix($color-white, $color-primary, 30%);

// Base
$font-color: #bcc9d4;
$font-color-disabled: #424447;
$font-size: 12px;
$header-font-size: $font-size;
$hover-color: $color-primary;
$nav-color: #b9c2cc;
$nav-border-color: #27343e;

// Animation
$ease-base-out: cubic-bezier(0.7, 0.3, 0.1, 1);
$ease-base-in: cubic-bezier(0.9, 0, 0.3, 0.7);
$ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
$ease-in: cubic-bezier(0.55, 0.055, 0.675, 0.19);
$ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
$ease-out-back: cubic-bezier(0.12, 0.4, 0.29, 1.46);
$ease-in-back: cubic-bezier(0.71, -0.46, 0.88, 0.6);
$ease-in-out-back: cubic-bezier(0.71, -0.46, 0.29, 1.46);
$ease-out-circ: cubic-bezier(0.08, 0.82, 0.17, 1);
$ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.34);
$ease-in-out-circ: cubic-bezier(0.78, 0.14, 0.15, 0.86);
$ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
$ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
$ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);

$animation-duration-slow: 0.3s; // Modal
$animation-duration-base: 0.2s;
$animation-duration-fast: 0.1s; // Tooltip

// Background
$background-color: #171b22;
$background-dark-color: #1d262e;
$background-color-secondary: #303640;

// Border
$border-color: #434b55;
$border-outline: 1px solid #0b0c0d;

// Input
$input-font-color: $font-color;
$input-bgcolor: $color-dark;
$input-border-color: #0b0c0d;
$input-font-color-description: #5c6366;
$input-hover-color: $color-primary;

// Scrollbar
$scrollbar-thumb-bg: #434b55;
$scrollbar-thumb-width: 4px;
$scrollbar-thumb-height: 4px;

// tooltip-popover
$tooltip-popover-color: #fff;
$tooltip-popover-bgcolor: #1b3964;
$tooltip-popover-shadow-color: #000;

// drop-list-popover
$drop-list-popover-bgcolor: $color-dark;
$drop-list-popover-hover-bgcolor: #1a1b1d;

// Popover
$popover-dark-bgcolor: $color-dark;

// Border
$border-color: #3a4659;
$border: 1px solid $border-color;
$border-dark: 1px solid #000;
$border-primary: 1px solid $color-primary;

// Shadow
$shadow-color: #000;
$shadow: 0 0 10px -6px $shadow-color;
$shadow-secondary: 0 0 8px -4px $shadow-color;

// Icon
$icon-color: $color-white;
$icon-hover-color: $color-primary;

// State
$state-color: #576369;

// Message
$message-font-color: #fff;
$message-success-bgcolor: #1b3964;
$message-success-border-color: $color-primary;
$message-warning-bgcolor: #593c27;
$message-warning-border-color: $color-warning;
$message-error-bgcolor: #5d2b3e;
$message-error-border-color: $color-error;

// MessageBox
$message-box-bgcolor: #303640;
$message-box-icon-color: #ff4f43;
$message-box-border-color: $border-color;

// Slider
$slider-color: #74f0ff;
$slider-runway-color: #bcc9d4;
$slider-track-color: linear-gradient(to right, $slider-color, $color-primary);

// Button
$button-font-color: $color-white;
$button-active-shade-percent: 10% !default;

// Loading
$loading-color: #1996df;

// Dialog
$dialog-bgcolor: #303640;

// Switch
$switch-height: 28px;
$switch-bgcolor: #0b0c0d;
$switch-border-color: #303740;

// Select
$select-font-color: #a1aeb3;
$select-bgcolor: #111417;
$select-option-bgcolor: #1d2126;
$select-option-hover-bgcolor: #1b3964;
$select-selected-color: #fff;

// Tabs
$tabs-nav-bgcolor: #191c21;
$tabs-bar-active-bgcolor: $color-primary;
$tabs-font-color: $font-color;
$tabs-font-hover-color: $color-primary;
$tabs-active-bgcolor: #14161a;
$tabs-content-bgcolor: #13161a;
$datav-tabs-nav-bgcolor: #13161a;
$datav-tabs-nav-active-bgcolor: #1d2126;

// Collapse
$collapse-font-color: $font-color;
$collapse-bgcolor: #13161a;
$collapse-border-color: #141210;

/* Editor
-------------------------- */
// Header
$header-color: #a1aeb3;
$header-icon-color: #fff;
$header-bgcolor: #1d1e1f;
$header-btn-bgcolor: #303640;
$header-btn-hover-bgcolor: #414750;

// Layer
$panel-bgcolor: #1d2126;
$panel-font-color: $font-color;
$panel-img-border-color: #37bfff;

$layer-bgcolor: #2e343c;
$layer-font-color: #fff;
$layer-toolbar-bgcolor: #20242a;
$layer-toolbar-hover-bgcolor: #3a4650;
$layer-toolbar-icon-color: #282f3a;
$layer-toolbar-border: 1px solid #282f3a;
$layer-manager-bgcolor: #1b1f25;
$layer-manager-hide-color: #576369;
$layer-manager-hide-bgcolor: #1c1f25;
$layer-thumbail-bgcolor: #282a30;
$layer-input-bgcolor: #363c48;

$config-panel-bgcolor: #1c1f25;
$config-manager-bgcolor: #191c21;

$page-config-font-color: #fff;
$page-config-bgcolor: #1c2026;
$page-config-secondary-bgcolor: #262c33;

// ContextMenu
$context-menu-font-color: $font-color;
$context-menu-bgcolor: #27343e;
$context-menu-hover-color: #00baff;
$context-menu-hover-bgcolor: #1d262e;
$context-menu-disable-color: #576369;
$context-menu-divider-bgcolor: #3a4659;

// Footer
$footer-bgcolor: #222528;
$footer-color: $font-color;
$footer-hover-color: $color-primary;
$footer-shortcut-bgcolor: #262b33;
$footer-shortcut-color: #08a1db;
$footer-shortcut-hover-color: #0b0c0d;

$editor-popover-bgcolor: #303640;

/* Editor End
-------------------------- */

// DataV GUI
$field-font-size: $font-size;
$field-font-color: #fff;
$field-font-secondary-color: #7f97a0;
$field-height: 28px;
$field-help-color: #a1aeb3;
$field-hover-color: $color-primary;
$field-container-width: 192px;

$upload-font-color: #fff;
$upload-tip-color: $font-color;
$upload-bgcolor: $color-dark;
$upload-hover-bgcolor: $background-color-secondary;

$gui-component-bgcolor: $color-dark;
$gui-component-color: #a1aeb3;
$gui-transform-border-color: #05ddff;

$ruler-bg: #0e1013;
$ruler-tag-bg: rgba(64, 116, 180, 1);
$ruler-line-bg: rgba(0, 173, 255, 0.84);
$ruler-mark-color: #3a4659;
$ruler-font-color: rgba(161, 174, 179, 0.8);
